<template>
    <div class="detilBox">
        <div class="head">
            <div class="imgBox">
                <img src="" alt="">
            </div>
            <p>
                微志益公益
            </p>
        </div>
        <div class="content">
            <div class="center" v-if="this.IndexData">
                <div class="daohang">
                    <ul>
                        <li class="new" @click="toIndex">首页 ></li>
                        <li class="new" @click="tomoney">捐款项目列表 ></li>
                        <li class="now">{{this.IndexData.name}}</li>
                    </ul>
                </div>

                <div class="imgBox">
                    <img :src="this.IndexData.image" alt="">
                </div>

                <div class="detail">
                    <h4>{{this.IndexData.name}}</h4>
                    <p class="nr nr1">
                        {{this.IndexData.nr1}}
                    </p>
                    <div class="detailImg" v-if="this.IndexData.detailImg">
                        <ul>
                            <li v-for="item in this.IndexData.detailImg" :key="item.id">
                                <img :src="item.img" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="btn" @click="showPopup">
                        我要捐款
                    </div>
                    <van-popup v-model="show" closeable round>
                                <div class="show">
                                    <div class="ipt">请输入您的捐款金额：
                                        <input type="text" name="" id="">
                                        单位（元）
                                    </div>
                                    <div class="ewm">
                                        <img src="/images/ewm2.png" alt="">
                                    </div>
                                    <p class="ms">微信扫描上方二维码进行捐款</p>
                                </div>
                            </van-popup>
                    <p class="nr nr2">
                        {{this.IndexData.nr2}}
                    </p>
                </div>
            </div>

            
            <div class="right">
                <div class="tj">
                    <p class="title">善款公开 透明公益</p>
                    <p class="txt">本网站严格记录捐款资金流向，实现善款公开，公益透明</p>
                </div>
                <div class="jb">
                    <p>发现此项目存在欺诈嫌疑？</p>
                    <div class="jbBtn">
                        立即举报
                    </div>
                </div>
            </div>
        </div>
        <end></end>
    </div>
</template>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
import  {getMoney} from '../../api/Money'
Vue.use(Popup);

export default {
    data(){
        return{
            detailData:"",
            IndexData:"",
            show: false
        }
    },
    mounted(){
        getMoney().then(res=>{
        //  axios.get('/data/money.json').then(res=>{
             //截取出id
             let id=this.$route.params.id.slice(3)
            //  console.log(id);
             let tempArr = res.data.filter(item => {
                  for(let i of item.data){
                     if(i._id == id)
                     return i
                  }
             })
            //  console.log(tempArr);
             this.IndexData=tempArr[0].data.filter(item=>
                 item._id == id
             )[0]
            //  console.log(this.IndexData);
        })      
    },
    methods:{
        toIndex(){
            this.$router.push('/Index')
        },
        tomoney(){
            this.$router.push('/money')
        },
        showPopup() {
            this.show = true;
        }
    }
}
</script>
<style lang="scss" scoped>
    .head{
        width: 100%;
        height: 60px;
        border: 1px solid;
        display: flex;
        padding: 0 200px;
        box-sizing: border-box;
        background: #333;
        min-width: 1000px;
        position: fixed;
        top: 0;
        .imgBox{
            width: 45px;
            height: 45px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background: url('/images/image3.jpg');
            background-size: cover;
            background-position: -7px 2px;
            margin-top: 6px;
        }
        p{
            line-height: 60px;
            padding-left: 20px;
            color: green;
            font-size: 18px;
        }
    }

    .content{
        width: 1080px;
        border-top: 1px solid #c0c0c0;
        margin:100px auto;
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        .center{
            width: 750px;
            .daohang{
                ul{
                    display: flex;
                    li{
                        font-size: 14px;
                        padding: 0 5px;
                        color: #333;
                    }
                    .new{
                        cursor: pointer;
                    }
                    .new:hover{
                        color: green;
                        text-decoration: underline;
                    }
                    .now{
                        color: #777;
                    }
                }
            }
            .imgBox{
                width: 720px;
                height: 400px;
                border: 1px solid #eee;
                margin: auto;
                margin-top: 26px;
                margin-bottom: 40px;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .detail{
                h4{
                    padding-left: 25px;
                    font-size: 25px;
                    color: #333;
                }
                .nr{
                    width: 680px;
                    text-indent: 30px;
                    margin: auto;
                    margin-top: 30px;
                    text-align: left;
                    font-size: 15px;
                    color: #333;
                }
                .detailImg{
                    padding-left: 80px;
                    margin-top: 25px;
                    box-sizing: border-box;
                    ul{
                        li{
                            margin-top: 5px;
                            overflow: hidden;
                            img{
                                border: 1px solid #ccc;
                            }
                        }
                    }
                }
            }
            .btn{
                width: 200px;
                height: 50px;
                background: green;
                color: #fff;
                text-align: center;
                line-height: 50px;
                margin: 30px auto;
                border-radius: 10px;
                cursor: pointer;
                transition: all .2s;
            }
            .btn:hover{
                transform: scale(1.02)
            }
            .show{
                width: 500px;
                height: 380px;
                box-sizing: border-box;
                padding: 40px 20px;
                .ipt{
                    margin-top: 20px;
                    text-align: center;
                    color: green;
                    input{
                        border-radius: 10px;
                        box-sizing: border-box;
                        padding-left: 15px;
                        width: 150px;
                    }
                }
                .ewm{
                    width: 160px;
                    margin: 30px auto;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
                .ms{
                    text-align: center;
                    color: red;
                }
            }
        }
        .right{
            width: 250px;
            height: 200px;
            position: -webkit-sticky;
            position: sticky;
            top: 80px;
            .tj{
                box-sizing: border-box;
                padding: 15px 20px;
                border: 1px solid #ccc;
                height: 150px;
                border-radius: 5px;
                .title{
                    font-size: 18px;
                }
                .txt{
                    margin-top: 10px;
                    font-size: 14px;
                    color: #555;
                }
            }
            .jb{
                margin-top: 20px;
                border-bottom: 1px solid #ccc;
                padding-bottom: 20px;
                p{
                    color: #555;
                    text-align: center;
                }
                .jbBtn{
                    width: 100px;
                    background: red;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 10px;
                    color: #fff;
                    cursor: pointer;
                    margin:10px auto;
                    opacity: .6;
                }
                .jbBtn:hover{
                    opacity: 1;
                }
            }
        }
    }
</style>